<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义style</title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		p {
			padding: 20px;
			border: 1px dashed #999;
		}
		label {
			padding: 0 10px;
		}
	</style>
	<body>
		<div id="app">
			<label>字号：</label>
			<select v-model="fontSize">
				<option v-for="i in 15" :value="i + 11">{{ i + 11 }}px</option>
			</select>
			<label>字体：</label>
			<select v-model="fontFamily">
				<option value="微软雅黑">微软雅黑</option>
				<option value="宋体">宋体</option>
				<option value="黑体">黑体</option>
				<option value="楷体">楷体</option>
			</select>
			<label>颜色：</label>
			<input type="color" v-model="color">
			<label>字重：</label>
			<select v-model="fontWeight">
				<option v-for="i in 9" :value="i * 100">{{ i * 100 }}</option>
			</select>
			<label>行间距：</label>
			<input type="number" v-model="lineHeight" style="width: 50px;"> px
			<label>字间距：</label>
			<input type="number" v-model="letterSpacing" style="width: 50px;"> px
			<label>首行缩进：</label>
			<input type="number" v-model="textIndent" style="width: 50px;"> em
			<p :style="textStyle">
				那是一个阳光明媚的清晨，我站在车站的候车室里，心中满是对即将开始的旅程的期待。然而，我的目光却被不远处的一个身影深深吸引。那是一位父亲，他正送自己的儿子踏上远行的列车。
				
				父亲穿着一件深色的外套，岁月在他的脸上刻下了深深的痕迹，但他的眼神中却透着一种坚定和温柔。儿子背着一个大大的行囊，显得有些笨拙，父亲则紧紧地跟在后面，不时地叮嘱着什么。我虽然听不到他们的对话，但从儿子微微点头的动作中，我能感受到那份浓浓的父爱。
				
				列车即将进站，父亲停下脚步，从口袋里掏出一张皱巴巴的手帕，仔细地擦拭着儿子额头上的汗珠。儿子抬起头，望着父亲，眼中闪过一丝不舍。父亲微微一笑，拍了拍儿子的肩膀，仿佛在说：“别担心，我会在这里等你回来。”那一刻，阳光洒在父亲的脸上，他的笑容温暖而明亮，如同一盏灯，照亮了儿子前行的道路。
				
				列车缓缓驶入站台，儿子转身走向车厢，父亲则站在原地，目送着他。儿子走进车厢，回头望了一眼父亲，父亲也立刻回应，用力地挥了挥手。列车开始启动，父亲的身影逐渐变得模糊，但他依然站在那里，直到列车消失在远方。
				
				我站在一旁，望着父亲那渐渐远去的背影，心中涌起一股莫名的感动。那背影，是父亲对儿子深深的牵挂，是无声的爱与支持。它让我想起了自己的父亲，想起了那些他为我默默付出的日子。父亲总是不善言辞，但他用行动告诉我，他的爱从未缺席。
				
				在人生的道路上，我们或许会遇到各种困难和挑战，但只要想起那个温暖的背影，我们就会充满力量。
			</p>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						fontSize: 12,
						fontFamily: '微软雅黑',
						color: '#000000',
						fontWeight: 400,
						lineHeight: 25,
						letterSpacing: 1,
						textIndent: 0
					};
				},
				computed: {
					textStyle() {
						return {
							fontSize: `${this.fontSize}px`,
							fontFamily: this.fontFamily,
							color: this.color,
							fontWeight: this.fontWeight,
							lineHeight: `${this.lineHeight}px`,
							letterSpacing: `${this.letterSpacing}px`,
							textIndent: `${this.textIndent}em`
						};
					}
				}
			}).mount("#app");
		</script>
	</body>
</html>
